<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      G6.registerNode('expandNode', {
        draw(cfg, group) {
          const mainGroup = group.addGroup({
            id: 'main-group',
          });
          const keyShape = mainGroup.addShape('rect', {
            attrs: {
              x: 0,
              y: 0,
              width: 100 + 60 * cfg.values.length,
              height: 50,
              fill: '#f5f5f5',
            },
          });

          // name text
          mainGroup.addShape('text', {
            attrs: {
              text: cfg.name,
              fill: '#000',
              width: 130,
              x: 10,
              y: 32,
            },
          });

          const subGroup = group.addGroup({
            id: 'sub-group',
          });
          cfg.values.forEach((data, index) => {
            subGroup.addShape('rect', {
              attrs: {
                x: 110 + index * 60,
                y: 0,
                width: 50,
                height: 50,
              },
            });

            subGroup.addShape('text', {
              attrs: {
                text: data.key,
                fill: '#000',
                x: 130 + index * 60,
                y: 20,
                fontSize: 10,
                textBaseline: 'middle',
                className: 'sub-group-text',
              },
            });

            subGroup.addShape('text', {
              attrs: {
                text: data.value,
                fill: '#000',
                x: 130 + index * 60,
                y: 30,
                fontSize: 10,
                textBaseline: 'middle',
                textAlign: 'left',
                className: 'sub-group-text',
              },
            });
          });

          const listGroup = group.addGroup({
            id: 'detail-list-group',
          });

          listGroup.addShape('rect', {
            attrs: {
              width: 100 + 60 * cfg.values.length - 70,
              height: 30 * cfg.properties.length + 20,
              fill: '#fff',
              x: 70,
              y: 30,
            },
          });

          const rectWidth = 100 + 60 * cfg.values.length - 80;
          cfg.properties.forEach((property, index) => {
            listGroup.addShape('rect', {
              attrs: {
                width: rectWidth,
                height: 30,
                fill: '#e8e8e8',
                x: 80,
                y: 40 * index + 40,
              },
            });
            let count = 0;
            for (let p in property) {
              // 每个rect中添加5个文本
              listGroup.addShape('text', {
                attrs: {
                  text: property[p],
                  fill: '#000',
                  x: 85 + count * (rectWidth / cfg.values.length) - count * 10,
                  y: 40 * index + 40 + 15,
                  fontSize: 10,
                  textBaseline: 'middle',
                  textAlign: 'left',
                },
              });
              count++;
            }
          });
          listGroup.hide();
          return keyShape;
        },
      });

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 500,
        height: 500,
        renderer: 'svg',
        modes: {
          default: ['drag-canvas'],
        },
        fitView: true,
      });

      const data = {
        nodes: [
          {
            id: 'shape1',
            shape: 'expandNode',
            name: '主动进入',
            values: [
              {
                key: '曝光率',
                value: '19.09',
              },
              {
                key: '流入UV',
                value: '910',
              },
              {
                key: '点击率',
                value: '90',
              },
              {
                key: '占比',
                value: '90',
              },
            ],
            properties: [
              {
                name: '搜索',
                value1: '102',
                value2: '102',
                value3: '102',
                value4: '102',
              },
              {
                name: '扫一扫',
                value1: '102',
                value2: '102',
                value3: '102',
                value4: '102',
              },
            ],
          },
          {
            id: 'shape1',
            x: 0,
            y: 150,
            shape: 'expandNode',
            name: '主动进入',
            values: [
              {
                key: '曝光率',
                value: '19.09',
              },
              {
                key: '流入UV',
                value: '910',
              },
              {
                key: '点击率',
                value: '90',
              },
              {
                key: '占比',
                value: '90',
              },
            ],
            properties: [
              {
                name: '搜索',
                value1: '102',
                value2: '102',
                value3: '102',
                value4: '102',
              },
              {
                name: '扫一扫',
                value1: '102',
                value2: '102',
                value3: '102',
                value4: '102',
              },
            ],
          },
        ],
      };
      graph.data(data);
      graph.render();

      // 点击node，展开详情
      graph.on('node:click', evt => {
        const { target } = evt;
        const parentGroup = target.get('parent').get('parent');
        const detailGroup = parentGroup.findById('detail-list-group');
        // 将sub-group中的内容网上移动一段距离
        const subGroup = parentGroup.findById('sub-group');
        const keyTexts = subGroup.findAll(item => {
          return item.attr('className') === 'sub-group-text';
        });
        const isVisible = detailGroup.get('visible');
        if (isVisible) {
          detailGroup.hide();
          keyTexts.forEach(text => {
            const top = text.attr('y');
            text.attr('y', top + 10);
          });
        } else {
          keyTexts.forEach(text => {
            const top = text.attr('y');
            text.attr('y', top - 10);
          });
          detailGroup.show();
        }
        console.log(keyTexts);
        graph.paint();
      });
    </script>
  </body>
</html>
